<template>
  <div class="wutong-pool">
    <div class="header-ban">
      <img class="banner1" src="@/assets/images/banner.png" alt="">
      <img class="banner2" src="@/assets/images/bannerfu.png" alt="">
      <div class="title1">高层次人才梧桐库</div>
      <div class="title2">梧桐引才，驾驶未来</div>
    </div>
    <div class="bg-box">
      <!-- <img class="bg" src="@/assets/images/bgbox.png" alt=""> -->
      <div class="card-box">
        <div class="tips">人才概况</div>
        <div class="dv2">
          <div class="menu-item">
            <yhpie-charts />
          </div>
          <div class="menu-item">
            <div class="ygzs">员工总数(人)</div>
            <div class="ygnum">265</div>
            <div class="info">
              <div class="sp1">年同比</div>
              <img class="up" src="@/assets/images/up.png" alt="">
              <div class="sp2">+15%</div>
            </div>
          </div>
          <div class="menu-item">
            <div class="ygzs">人才总数(人)</div>
            <div class="ygnum">{{talentData.talentCount}}</div>
            <div class="info">
              <div class="sp1">年同比</div>
              <img class="up" src="@/assets/images/down.png" alt="">
              <div class="sp2">-5%</div>
            </div>
          </div>
        </div>
        <div class="dv3">
          <div class="menu-item">
            <div class="count">项目总金额</div>
            <div class="money">{{talentData.projectAmount}}<span class="wym">万元</span></div>
          </div>
          <div class="dashx"></div>
          <div class="menu-item">
            <div class="count">项目总数</div>
            <div class="money">{{talentData.projectCount}}<span class="wym">个</span></div>
          </div>
          <div class="dashx"></div>
          <div class="menu-item">
            <div class="count">人才引进总数</div>
            <div class="money">{{ talentData.talentCount }}<span class="wym">人</span></div>
          </div>
        </div>
      </div>
      <div class="rczyfx">
        <div class="tips">人才等级分析</div>
        <div class="progress">
          <div class="ps-item" v-for="(item, index) of rcdjList" :key="index">
            <img v-if="index==0" class="ps1" src="@/assets/images/ps1.png" alt="">
            <img v-if="index==1" class="ps1" src="@/assets/images/ps2.png" alt="">
            <img v-if="index==2" class="ps1" src="@/assets/images/ps3.png" alt="">
            <div v-if="index!=0&&index!=1&&index!=2" class="paim">{{ index+1 }}</div>
            <div class="jdt">
              <div class="ps-name">
                <span class="leixing">{{ item.title }}</span>
                <span class="lxnum">{{ item.value }}</span>
                <span class="lxdw">(人)</span>
              </div>
              <van-progress :percentage="item.percent*100+'%'" stroke-width="8" color="linear-gradient(90deg, #3294FA 0%, #37BCFF 100%)" />
            </div>
          </div>
        </div>
      </div>
      <div class="xlfx">
        <div class="tips">人才学历分析</div>
        <pie-charts />
      </div>
      <div class="zcfx">
        <div class="tips">人才职称分析</div>
        <pie-chartszc />
      </div>
      <div class="dqyj">
        <div class="tips">合同到期预警</div>
        <div class="dv3">
          <div class="menu-item">
            <div class="count">本月到期</div>
            <div class="money">0</div>
          </div>
          <div class="dashx"></div>
          <div class="menu-item">
            <div class="count">近半年到期</div>
            <div class="money">0</div>
          </div>
          <div class="dashx"></div>
          <div class="menu-item">
            <div class="count">今年到期</div>
            <div class="money">1</div>
          </div>
        </div>
        <!-- <yhpie-chartsbt /> -->
        <div ref="pieChart4" style="width: 30rem; height: 20rem;margin: 0 auto;"></div>
        <div class="chartsdv">
          <div class="chart-shuju" v-for="(item, index) of htyjList" :key="index">
              <div class="titlecr" :style="{background: item.color}"></div>
              <div class="titlep1">{{item.title}}</div>
              <div class="titlep">{{item.value}}</div>
              <div v-if="index==0" class="titlep">{{item.percent}}</div>
              <div v-else class="titlep">{{item.percent*100}}%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, toRefs, onMounted } from 'vue';
import { getTalentStatistics,getTalentDjfxChart,getContractWarning } from '@/api/company';
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';

const talentData = ref({})
async function getDetail() {
  const id = '91321200MACTU4PJ4N'; //companyId
  const { code, data } = await getTalentStatistics(id);
  if(code === 200) {
    talentData.value = data
  }
}

const rcdjList = ref([])
async function getrcdjFbgkDetail() {
  const id = '91321200MACTU4PJ4N'; //companyId
  const { code, data } = await getTalentDjfxChart(id);
  if(code === 200) {
    rcdjList.value = data
    console.log('rcdjList.value:',rcdjList.value);
  }
}

const htyjList = ref([])
const last6Months = ref('')
const currentMonth = ref('')
const currentYear = ref('')
const pieData = []

async function getContractWarningDetail() {
  const id = '91321200MACTU4PJ4N'; //companyId
  const { code, data } = await getContractWarning(id);
  if(code === 200) {
    htyjList.value = data.pieData
    console.log('htyjList.value:',htyjList.value);
    let obj1 ={
      title:'时间',
      value: '人数（人）',
      percent: '占比'
    }
    htyjList.value.unshift(obj1)
    // data.pieData.forEach(item=>{
    //   htyjList.value.push({
    //     name: item.title,
    //     value: item.percent
    //   })
    // })
    last6Months.value = data.last6Months
    currentMonth.value = data.currentMonth
    currentYear.value = data.currentYear

    htyjList.value[0].color = "#208AFF";
    if(htyjList.value[1]){
      htyjList.value[1].color = "#63E3DF";
    }
    if(htyjList.value[2]){
      htyjList.value[2].color = "#766FFE";
    }
    if(htyjList.value[3]){
      htyjList.value[3].color = "#FF8F59";
    }
    if(htyjList.value[4]){
      htyjList.value[4].color = "#FFC734";
    }
    data.pieData.forEach(item=>{
      pieData.push({
        name: item.title,
        value: item.percent
      })
    })
    console.log('pieData:',pieData);
  }
}

const pieChart4 = ref(null);
const chartPieCanvas2 = ()=>{
  const chartInstance = echarts.init(pieChart4.value);
  // var pieData =  [
  //   { value: 40, name: '30天内' },
  //   { value: 25, name: '30-60天' },
  //   { value: 15, name: '60-90天' },
  //   { value: 10, name: '90-180天' },
  //   { value: 5, name: '一年以上' },
  // ]
  const option = {
  series: [
    {
      type: 'pie',
      color: [
        '',
        '#208AFF',
        '#63E3DF',
        '#766FFE',
        '#FF8F59',
        '#FFC734',
      ],
      legend: {
        
      },
      data: pieData,
      radius: ['20%', '34%'],
      label: {
            show: true,
            color: '#D1D1D1',
            formatter: function (arg) {
                console.log(arg)
                return arg.data.name + '\n' + arg.value*100 + '%'
            }
        },
    }
  ]
};
chartInstance.setOption(option);
}

const chartsbtData = ref([
  {
    name1:'时间',
    name2: '人数（人）',
    name3: '占比'
  },
  {
    name1:'30天内',
    name2: '58',
    name3: '40%'
  },
  {
    name1:'30-60天',
    name2: '25',
    name3: '25%'
  },
  {
    name1:'60-90天',
    name2: '15',
    name3: '15%'
  },
  {
    name1:'90-180天',
    name2: '10',
    name3: '10%'
  },
  {
    name1:'一年以上',
    name2: '5',
    name3: '5%'
  },


])

onMounted(() => {
  getDetail()
  getrcdjFbgkDetail()
  getContractWarningDetail()
  setTimeout(()=>{
    chartPieCanvas2()
  },1000)
})

const router = new useRouter();

//  页面跳转
const jump = (options) => {
  router.push(options);
}


</script>

<style lang="scss" scoped>
.wutong-pool {
  box-sizing: border-box;
  height: 100%;
  background: #E8F2FB;

  .header-ban{
    position: relative;

    .banner1{
      width: 100vw;
      // height: 20rem;
    }
    .banner2{
      position: absolute;
      right: 1rem;
      top: 0.5rem;
      width: 12.3rem;
    }
    .title1{
        position: absolute;
        top: 1.5rem;
        left: 1.9rem;
        font-size: 2rem;
        font-weight: 700;
        color: #4252FF;
    }
    .title2{
        position: absolute;
        top: 4.3rem;
        left: 1.9rem;
        font-size: 1.4rem;
        font-weight: 400;
        color: #076DFF;
    }
  }
  .bg-box{
    width: 100%;
    min-height: 100vh;
    position: relative;
    background: #E8F2FB;

    .bg{
      width: 100%;
      height: 162rem;
    }
  
    .card-box{
      width: 94%;
      border-radius: 5px;
      background: #FFFFFF;
      position: relative;
      top: -2rem;
      padding: 1.1rem 1.3rem;
      box-sizing: border-box;
      // left: 3%;
      margin-left: 3%;
      box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);

      .tips{
        font-size: 1.8rem;
        font-weight: 700;
      }
      .dv1{
        font-size: 1.4rem;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        margin-top: 2rem;

        .img1{
          width: 16px;
          height: 16px;
          margin-right: 1rem;
        }
      }
      .dv2{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.9rem;
        padding: 2rem;
        border-radius: 0.4rem;
        background: #FFF7F1;

        .menu-item{
          text-align: left;
        }
        .ygzs{
          color: #666666;
          font-size: 1.2rem;
          font-weight: 400;
        }
        .ygnum{
          color: #121212;
          font-size: 1.8rem;
          font-weight: 700;
          margin: 0.2rem 0 0.4rem;
        }
        .info{
          display: flex;
          align-items: center;
          justify-content: flex-start;
          color: #666666;
          font-size: 1.2rem;
          font-weight: 400;

          .up{
              width: 0.5rem;
              height: 0.7rem;
              margin: 0 0.2rem 0 0.6rem;
          }
          .sp2{
              font-size: 1.2rem;
              font-weight: 700;
              color: #121212;
          }
        }
      }
      .dv3{
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 1.1rem 0.5rem;
        border-radius: 0.4rem;
        background: #F3F9FE;
        margin-top: 2rem;

        .menu-item{
          text-align: left;
          
          .count{
            font-size: 1.4rem;
            font-weight: 400;
            color: #666666;
            margin-bottom: 0.5rem;
          }
          .money{
            color: #121212;
            font-size: 1.8rem;
            font-weight: 700;
            text-align: center;

            .wym{
              color: #666666;
              font-size: 1.2rem;
              font-weight: 400;

            }

          }
        }
        .dashx{
          width: 0.1rem;
          height: 4rem;
          border-left: 1px dashed #2A82E4;
        }
      }
    }
    .rczyfx{
      width: 94%;
      border-radius: 5px;
      background: #FFFFFF;
      // margin-top: 20rem;
      // position: absolute;
      // top: 17rem;
      // margin-left: 3%;
      // position: relative;
      // top: -8rem;
      padding: 1.1rem 1.3rem;
      box-sizing: border-box;
      box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);
      margin: 0 3% 1.3rem;

      .tips{
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 1rem;
      }
      .progress{
        
        .ps-item{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 2rem;

          .ps1{
            width: 2rem;
            height: 1.7rem;
            margin-right: 1rem;
          }
          .paim{
            font-size: 1.4rem;
            font-weight: 700;
            margin-right: 1rem;
          }
          .jdt{
            width: 90%;

            .ps-name{
              margin-bottom: 0.6rem;

            }
            .leixing{
              font-size: 1.2rem;
              font-weight: 400;
              margin-right: 2.8rem;
              color: #6D6D6D;
            }

            .lxnum{
              font-size: 1.2rem;
              font-weight: 700;
              color: #333333;
              margin-right: 0.2rem;
            }
            .lxdw{
              font-size: 0.8rem;
              font-weight: 400;
              color: #D1D1D1;

            }

          }

        }

      }
    }
    .xlfx,.zcfx,.dqyj{
      width: 94%;
      height: 29rem;
      border-radius: 5px;
      background: #FFFFFF;
      // position: absolute;
      // top: 50rem;
      margin: 0 3% 1.3rem;
      padding: 1.1rem 1.3rem;
      box-sizing: border-box;
      box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);
    
      .tips{
        font-size: 1.8rem;
        font-weight: 700;
        // margin-bottom: 2.7rem;
      }
    }
    .zcfx{
      // top: 81rem;
    }
    .dqyj{
      // top: 112rem;
      height: 48rem;

      .dv3{
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 1.1rem 0.5rem;
        border-radius: 0.4rem;
        background: #F3F9FE;
        margin-top: 2rem;

        .menu-item{
          text-align: left;
          
          .count{
            font-size: 1.4rem;
            font-weight: 400;
            color: #666666;
            margin-bottom: 0.5rem;
          }
          .money{
            color: #FC3B3E;
            font-size: 1.8rem;
            font-weight: 700;
            text-align: center;
          }
        }
        .dashx{
          width: 0.1rem;
          height: 4rem;
          border-left: 1px dashed #2A82E4;
        }
      }
      .chartsdv{
        width: 100%;
        margin-top: 1rem;
      
        .chart-shuju{
          margin: 0 auto;
          display: flex;
          justify-content: space-around;
          align-items: center;
          width: 20rem;

          .titlep1{
            font-size: 1.2rem;
            font-weight: 400;
            color: #D1D1D1;
            text-align: center;
            margin-bottom: 0.8rem;
            width: 5rem;
            text-align: center;
          }
          .titlep{
            font-size: 1.1rem;
            font-weight: 700;
            color: #6D6D6D;
            text-align: center;
            margin-bottom: 0.8rem;
            width: 7rem;
            text-align: center;
          }
          .titlep2{
            font-size: 1.1rem;
            font-weight: 700;
            color: #333333;
            text-align: center;
            margin-bottom: 0.8rem;
            width: 5rem;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>